<template>
  <div class="bg_st">
    <h1>关于我</h1>
    <div class="about">
      <div class="img_box">
        <img src="../assets/hg.jpeg" alt="" class="img" />
      </div>
      <div class="wenben_box">
        <p>{{ introduce }}</p>
        <div v-for="item in baseInfo" :key="item">
          <div class="bag_title">
            <div class="title">{{ item.title }}</div>
            <div>{{ item.info }}</div>
          </div>
        </div>
        <p>路漫漫其修远兮，吾将上下而求索。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      about: "About Me",
      introduce:
        "嗨，我是孟宪伟，是万千程序员中的一只努力向前飞的小菜鸟。喜欢思考，求知欲望强烈，勇于探索，喜欢鼓弄各种东西，对新鲜的东西有着无尽的好奇心，喜欢不断尝试，把自己所想和所爱结合在一起，创造出一些有意思的东西。",
      baseInfo: [
        { title: "Name:", info: "孟宪伟" },
        { title: "Country:", info: "中国" },
        { title: "Location:", info: "河北承德" },
        { title: "e-mail:", info: "1284908445@qq.com" },
      ],
    };
  },
};
</script> 

<style lang='scss' scoped>
@media screen and (max-width: 799px) {
  .bg_st {
    padding: 10vh 0px;
  }
  h1 {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: 700;
  }
  .about {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .img_box {
      width: 90%;
      height: auto;
      border: 6px solid #f6f6f6;
      　box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      margin: auto;
      .img {
        width: 100%;
        height: 75%;
      }
    }
    .wenben_box {
      p {
        line-height: 28px;
        font-size: 16px;
      }
      .bag_title {
        display: flex;
        justify-content: center;
        justify-content: space-between;
        margin: 10px;
      }
      margin: 20px;
      margin: auto;
      width: 80%;
      color: #040404;
      .title {
        font-weight: 700;
        color: #040404;
      }
    }
  }
}

@media screen and (min-width: 800px) {
  .bg_st {
    padding: 20vh 0px;
  }
  h1 {
    margin-bottom: 50px;
  }
  .about {
    display: flex;
    justify-content: center;
    // align-items: center;
    .img_box {
      width: 25%;
      height: auto;
      border: 8px solid #f6f6f6;
      　box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
      .img {
        width: 100%;
        height: 75%;
      }
      // margin-left:150px;
      margin-right: 50px;
    }
    .wenben_box {
      width: 25%;
      color: #040404;
      .title {
        font-weight: 700;
        color: #040404;
        position: relative;
        width: 120px;
        display: inline-block;
        margin-bottom: 5px;
      }
    }
  }
}
</style>